<template>
  <div class="pos">
    <el-row>
      <el-col :span='7' id="order-list" class="pos-order">
        <el-tabs>
          <el-tab-pane label='点餐'>
            <el-table :data="tableData" border show-summary style="width: 100%">
              <el-table-column  prop='goodsName' label='商品名称' ></el-table-column>
              <el-table-column  prop='count' label='数量' width="50"></el-table-column>
              <el-table-column  prop='price' label='价格' width="70"></el-table-column>
              <el-table-column  fixed='right' label='操作' width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                </template>
              </el-table-column>
              
            </el-table>
            <div class="div-btn">
              <el-button type='warning'>挂单</el-button>
              <el-button type='danger'>删除</el-button>
              <el-button type='success'>结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label='挂单'>

          </el-tab-pane>
          <el-tab-pane label='外卖'>

          </el-tab-pane>
        </el-tabs>
        
      </el-col>
      <el-col :span='17'>
        我是产品栏
      </el-col>
    </el-row>
  
  </div>
</template>

<script>
// import leftNav from '../common/leftNav'
export default {
  name: 'Pos',
  data () {
    return {
      tableData:[{
          goodsName: '可口可乐',
          price: 8,
          count:1
        }, {
          goodsName: '香辣鸡腿堡',
          price: 15,
          count:1
        }, {
          goodsName: '爱心薯条',
          price: 8,
          count:1
        }, {
          goodsName: '甜筒',
          price: 8,
          count:1
        }]
    }
  },
  mounted() {
    var outHeight = document.body.clientHeight;
    document.getElementById('order-list').style.height = outHeight+'px'

  },
  // components:{
  //   'leftNav':leftNav
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.pos-order{
  background-color: #d5d5d5;
  border-right: 1px solid #C0CCDA;

}
.div-btn{
  margin-top: 10px;
}

</style>
